CDN 部署与资源分发

生产环境使用 CDN 分发静态资源，提升全球用户访问速度。

CDN 部署架构

JavaScript

用户请求 → CDN 边缘节点 → 缓存命中？ → 返回资源
                          ↓ 未命中
                        源站获取 → 缓存 → 返回

配置 CDN 基础路径

HTML

export default defineConfig({
  base: 'https://cdn.example.com/assets/'
})

构建后资源引用：

JavaScript

<script src="https://cdn.example.com/assets/index-abc123.js"></script>
<link href="https://cdn.example.com/assets/index-def456.css">

资源哈希命名

Bash

export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        // JS 哈希命名
        entryFileNames: 'js/[name]-[hash].js',
        chunkFileNames: 'js/[name]-[hash].js',
        // CSS 哈希命名
        assetFileNames: (assetInfo) => {
          if (assetInfo.name.endsWith('.css')) {
            return 'css/[name]-[hash][extname]'
          }
          return 'assets/[name]-[hash][extname]'
        }
      }
    }
  }
})

注意：哈希命名确保缓存正确，内容变化文件名变化。

上传 CDN

JavaScript

# 构建产物
npm run build

# 上传 dist/assets 到 CDN
aws s3 sync dist/assets s3://cdn-bucket/assets/

# 或使用其他 CDN 服务

CDN 缓存策略

资源类型	缓存时间
HTML	短缓存或不缓存
JS/CSS	长期缓存
图片/字体	长期缓存

HTML 处理

YAML

// HTML 不放 CDN，放源站
// base 只影响静态资源
export default defineConfig({
  base: 'https://cdn.example.com/assets/',
  build: {
    // HTML 输出到源站目录
    outDir: 'dist-server'
  }
})

CDN 配置示例

JavaScript

# CDN 配置
cache:
  js: max-age=31536000  # 1年
  css: max-age=31536000
  images: max-age=31536000
  html: max-age=0       # 不缓存

多 CDN 配置

text

// 使用多个 CDN 域名
const cdnDomains = [
  'https://cdn1.example.com',
  'https://cdn2.example.com'
]

export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        // 可按资源类型分 CDN
        assetFileNames: (assetInfo) => {
          const cdn = assetInfo.name.endsWith('.css')
            ? cdnDomains[0]
            : cdnDomains[1]
          return `${cdn}/[name]-[hash][extname]`
        }
      }
    }
  }
})

要点总结

base 配置 CDN 基础路径
哈希命名确保缓存正确
HTML 放源站，静态资源放 CDN
JS/CSS 长期缓存，HTML 短缓存